<include file="Public/common" />
<block name="css">
    <icheckcss/>
    <style>
        .cofing-center{
            text-align: center!important;
        }
        .padding-10{
            padding: 10px!important;
        }
        .add-Box{
            float: right;
            margin-bottom: 20px;
        }
        .del-bottom{
            margin-bottom: 3px!important;
            margin-left:  5px!important;
        }
       th{text-align:center;}
    </style>
</block>
<block name="content">
    <div class="page-header"><h1><i class="fa fa-home"></i> 首页 &gt; 会员管理 &gt; 等级设置</h1></div>
    <div class="col-xs-6">
        <div class="tabbable">
                <button onclick="javascript:addGradeType();" type="button" class="btn btn-primary add-Box">新增</button>
                <table id="grade_list_tab" class="table table-striped table-bordered table-hover table-condensed">
                    <tr>
                        <th>等级所需积分</th>
                        <th>等级名称</th>
                    </tr>
                    <volist name="List" id="v" key="i">
                        <tr id="{$v['grade_id']}" class="tr_old" isLoad='1'> 
                            <th class="padding-10 cofing-center">积分累计&nbsp;&nbsp;<input class="input-medium cofing-center grade_score" type="text" name="grade_score" required value="{$v['grade_score']}"></th>
                            <td class="padding-10 cofing-center">&nbsp;&nbsp;<input class="input-medium cofing-center grade_name" type="text" name="grade_name" required value="{$v['grade_name']}">&nbsp;&nbsp;</td>
                        </tr>
                    </volist>
                </table>
                <div>
                    <button onclick="javascript:submitGradeType();" type="button" class="btn btn-primary">提交</button>
                </div>
        </div>
    </div>
</block>
<block name="js">
    <script>
        // 提交保存请求
        function submitGradeType(){
            var params={};
            // 旧的列数
            var oldNo = 0;
            // 新的列数
            var newNo = 0;

            var isCanSave = 1;
            // 先遍历已经存在了的只是修改的
            $(".tr_old").each(function(){
                params['grade_id_o_'+oldNo] = $(this).attr('id');
                params['grade_score_o_'+oldNo] = $.trim($(this).find(".grade_score").val());
                if (params['grade_score_o_'+oldNo] == '') {
                    isCanSave = 0;
                    layer.alert('请输入累计积分',{icon: 5});
                    return;
                }
                params['grade_name_o_'+oldNo] = $.trim($(this).find(".grade_name").val());
                if (params['grade_name_o_'+oldNo] == '') {
                    isCanSave = 0;
                    layer.alert('请输入会员等级名称',{icon: 5});
                    return;
                }
                params['oldNo'] = ++oldNo;
            });
            $(".tr_new").each(function(){
                params['grade_score_n_'+newNo] = $.trim($(this).find(".grade_score").val());
                if (params['grade_score_n_'+newNo] == '') {
                    isCanSave = 0;
                    layer.alert('请输入累计积分',{icon: 5});
                    return;
                }
                params['grade_name_n_'+newNo] = $.trim($(this).find(".grade_name").val());
                if (params['grade_name_n_'+newNo] == '') {
                    isCanSave = 0;
                    layer.alert('请输入会员等级名称',{icon: 5});
                    return;
                }
                params['newNo'] = ++newNo;

            });
            if (isCanSave == 1) {
                $.ajax({
                    url:'{:U("Visitor/saveGrade")}',
                    dataType:"json",
                    type:'POST',
                    cache:false,
                    data:params,
                    success: function(data) {
                        // layer.msg(data.msg);
                        if (data.status==1) {
                            layer.msg('操作成功');
                            setTimeout(function () {
                                location.reload();
                            },1500);
                        }
                    }
                });

            }
        }
        // 新增列
        function addGradeType(){
            var html = new Array();
            var className = "tr_new";
            html.push("<tr class='"+className+"' isLoad='1'>");
            html.push("<th class='padding-10 cofing-center'>");
            html.push("积分累计&nbsp;&nbsp;");
            html.push("<input class='input-medium cofing-center grade_score' type='text' placeholder='请输入累计积分'>");
            html.push("</th>"); 
            html.push("<td class='padding-10 cofing-center'>");
            html.push("&nbsp;&nbsp;");
            html.push("<input class='input-medium cofing-center grade_name' type='text' placeholder='请输入会员等级名称'>");
            html.push("<a class='btn btn-xs btn-warning del-bottom' onclick='delGradeTypeObj(this)'>删除");
            html.push("</a>");
            html.push("</td>");
            html.push("</tr>"); 
            $("#grade_list_tab").append(html.join(""));
        }
        // 删除新增的列表
        function delGradeTypeObj(obj){
            $(obj).parent().parent().remove();
        }
    </script>
</block>